<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' :background='background' back-icon-color='#FFFFFF'
			title="会员中心" title-color='#FFFFFF'></u-navbar>
		<view class="header">
			<view class="banner">
				<view class="title">
					i世界VIP尊享特权
				</view>
				<view class="kait">
					<text>开通VIP，预计每年可省¥5000</text>
					<u-icon name="arrow-right" color="#F1D2A3" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-ul">
				<view class="content-li" @click="showTextFn(0)">
					<image src="../../../static/imgs/fulijin.png" mode=""></image>
					<text>3000福利金</text>
				</view>
				<view class="content-li" @click="showTextFn(1)">
					<image src="../../../static/imgs/jiayouyouhui.png" mode=""></image>
					<text>加油优惠</text>
				</view>
				<view class="content-li" @click="showTextFn(2)">
					<image src="../../../static/imgs/lvyoujijin.png" mode=""></image>
					<text>旅游基金</text>
				</view>
				<view class="content-li" @click="showTextFn(3)">
					<image src="../../../static/imgs/tuiguangzq.png" mode=""></image>
					<text>推广赚钱</text>
				</view>
				<view class="content-li" @click="showTextFn(4)">
					<image src="../../../static/imgs/xiaofeifuli.png" mode=""></image>
					<text>消费福利</text>
				</view>
				<view class="content-li" @click="showTextFn(5)">
					<image src="../../../static/imgs/lvyoushengqian.png" mode=""></image>
					<text>旅游省钱</text>
				</view>
				<view class="content-li"  @click="showTextFn(6)">
					<image src="../../../static/imgs/hailiangyhq.png" mode=""></image>
					<text>海量优惠券</text>
				</view>
				<view class="content-li" @click="showTextFn(7)">
					<image src="../../../static/imgs/jiaoyukc.png" mode=""></image>
					<text>教育课程</text>
				</view>
			</view>
			<view class="subBtn">
				<view class="price">特惠￥299/年</view>
				<view class="zhe">￥949/年</view>
				<view class="sub" @click="open">
					立即开通
				</view>
			</view>
		</view>
		<view class="level">
			<view class="name">
				城市合伙人
			</view>
			<view class="tip">
				— — 送100个VIP名额 — —
			</view>
			<view class="confirm" @click="navTo">
				立享福利
			</view>
		</view>
		<view class="exclu">
			<view class="title">
				<image src="../../../static/imgs/zuobian.png" mode=""></image>
				<text>VIP会员专享优惠</text>
				<image src="../../../static/imgs/youbian.png" mode=""></image>
			</view>
			<view class="item-ul">
				<view class="item-li" v-for="(item,index) in vipList" :key='index'>
					<image :src="item.icon" mode=""></image>
					<view class="tit">
						{{item.title}}
					</view>
					<view class="priceBox">
						<view class="price">
							¥{{Number(item.vip_price).toFixed(0)}}
						</view>
						<view class="tex">
							可福利金抵扣
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showText" mode='center' closeable border-radius='16'>
			<view class="textBox">
				<view class="title">
					{{showTitle}}
				</view>
				<view class="cont">
					{{showContent}}
				</view>
				<view class="btn" @click="showText=false">
					确定
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showPayway" mode="bottom" closeable border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay" @click="confirmPay">
					支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				weiPaycheck: false,
				alPaycheck: false,
				showPayway: false,
				showText: false,
				background: {
					backgroundColor: 'rgba(44, 52, 67,1)'
				},
				payCur: 0,
				payId: '',
				payCode: '',
				vipList: [],
				textList:[
					{
						cont:	'注册立送3000元福利金，可100%抵扣体验游，十几条全球网红品质专属定制线路任选；一张机票，说走就走',
						title:'3000福利金'
					},
					{
						cont:	'注册立享优惠加油，覆盖全国8w+加油站，中石油中石化优惠券9.3折起，其它加油站7.5折起',
						title:'加油优惠'
					},
					{
						cont:	'购买商城产品立送旅游基金, 可全额支付全球旅行；也可用福利金抵扣，直接享受商品源头价格',
						title:'旅游基金'
					},
					{
						cont:	'推广VIP得100元，推广城市合伙人得1000元，推荐实体店上线得消费收益20%；推荐会员到实体店消费得收益10%，推荐会员参加体验游得服务费20%',
						title:'推广赚钱'
					},
					{
						cont:	'在合作实体店消费赠送等价的福利金',
						title:'消费福利'
					},
					{
						cont:	'福利金可抵扣品质游和尊享游，享受旅游直采价',
						title:'旅游省钱'
					},
					{
						cont:	'注册立送海量优惠券，汇聚各大品牌，涵盖吃喝玩乐购',
						title:'海量优惠券'
					},
					{
						cont:	'注册立送线上教育课程，几十种优质课程免费学',
						title:'教育课程'
					}					
				],
				showContent:'',
				showTitle:''
			}
		},
		onLoad() {
			this.getTrave()
		},
		methods: {
			showTextFn(index){
				this.showText = true
				this.showContent = this.textList[index].cont
				this.showTitle = this.textList[index].title
			},
			async open() {
				if(!this.$store.state.userInfo.province){
					uni.showModal({
						content:'暂未设置归属地,是否前往设置?',
						success(res) {
							if(res.confirm) {
								uni.navigateTo({
									url:'../editInfo/editInfo'
								})
							}
						}
					})
					return
				}
				let res = await myRequest.upVip({
					user_level: '1'
				})
				if (res.status) {
					this.payId = res.pay_id
					this.showPayway = true
				}
			},
			// 确认支付
			confirmPay() {
				let {
					payCode
				} = this
				if (!payCode) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../../homePage/pay/pay?payCode=' + this.payCode + '&payId=' + this.payId
				})
			},
			// 获取vip专享
			async getTrave() {
				let {
					page
				} = this
				let res = await myRequest.getTravel({
					page: '1',
					num: '1000'
				})
				if (res.status) {
					let list = []
					res.data.forEach((item) => {
						if (item.is_vip == 1) {
							list.push(item)
						}
					})
					list = list.sort(function() {
						return (0.5 - Math.random());
					})
					this.vipList = list.slice(0, 3)
				}
			},
			navTo() {
				uni.navigateTo({
					url: './vipEquity'
				})
			},
			weiChange(e) {
				if (e.value) {
					this.alPaycheck = false
					this.payCode = '6004'
				}
			},
			aliChange(e) {
				if (e.value) {
					this.weiPaycheck = false
					this.payCode = '6005'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 570rpx;
		@include bgi('../../../static/imgs/huiyuanzxbgi.png');
		padding-top: 42rpx;

		.banner {
			margin: 0 auto;
			width: 680rpx;
			height: 316rpx;
			@include bgi('../../../static/imgs/jiaoyubgi.png');

			.title {
				font-size: 40rpx;
				font-family: SourceHanSansCN-Regular;
				color: #FFFFFF;
				padding-top: 62rpx;
				padding-left: 30rpx;
			}

			.kait {
				margin-left: 22rpx;
				margin-top: 22rpx;
				width: fit-content;
				height: 44rpx;
				border: 2rpx solid #FEE3C8;
				border-radius: 22px;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular;
				color: #F1D2A3;
				text-align: center;
				line-height: 44rpx;
				padding: 0 16rpx;
			}
		}
	}

	.content {
		margin-top: -320rpx;
		width: 100%;
		height: 580rpx;
		@include bgi('../../../static/imgs/huiyuanbanner.png');

		.content-ul {
			padding-top: 60rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			.content-li {
				width: 186rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 140rpx;
					height: 140rpx;
				}

				text {
					margin-top: -10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #242424;
				}
			}
		}

		.subBtn {
			width: 686rpx;
			height: 88rpx;
			@include bgi('../../../static/imgs/btnicon.png');
			border-radius: 20rpx;
			overflow: hidden;
			margin: 60rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.price {
				font-size: 36rpx;
				font-family: SourceHanSansCN-Regular;
				color: #FCF2E1;
			}

			.zhe {
				font-size: 26rpx;
				font-family: SourceHanSansCN-Regular;
				color: #D8D8D8;
				text-decoration: line-through;
			}

			.sub {
				font-size: 32rpx;
				font-family: SourceHanSansCN-Medium;
				color: #FCF2E1
			}
		}
	}

	.level {
		width: 710rpx;
		height: 210rpx;
		@include bgi('../../../static/imgs/hehuoren.png');
		margin: 28rpx auto 0;

		.name {
			font-size: 44rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #242424;
			padding-top: 22rpx;
			padding-left: 78rpx;
		}

		.tip {
			font-size: 22rpx;
			font-family: SourceHanSansCN-Medium;
			color: #242424;
			padding-left: 40rpx;
		}

		.confirm {
			width: 162rpx;
			height: 44rpx;
			border: 2rpx solid #242424;
			border-radius: 44rpx;
			font-size: 22rpx;
			font-family: SourceHanSansCN-Regular;
			line-height: 44rpx;
			color: #242424;
			text-align: center;
			margin-left: 94rpx;
			margin-top: 16rpx;
		}
	}

	.exclu {
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 88rpx;
				height: 16rpx;
			}

			text {
				font-size: 32rpx;
				font-family: SourceHanSansCN-Regular;
				color: #242424;
				margin: 0 42rpx;
			}
		}

		.item-ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.item-li {
				width: 228rpx;
				height: auto;
				border-radius: 16rpx;
				background: #FFFFFF;
				padding-bottom: 10rpx;
				overflow: hidden;

				image {
					width: 228rpx;
					height: 228rpx;
				}

				.tit {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					height: 66rpx;
					overflow: hidden;
				}

				.priceBox {
					display: flex;
					align-items: center;
					margin: 10rpx auto 0;

					.price {
						width: fit-content;
						height: 36rpx;
						background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
						border-radius: 8rpx 0px 0px 8rpx;
						font-size: 20rpx;
						font-family: Arial;
						font-weight: bold;
						line-height: 36rpx;
						color: #333333;
						padding: 0 4rpx;
					}

					.tex {
						width: fit-content;
						height: 36rpx;
						background: #333333;
						border-radius: 0px 8rpx 8rpx 0px;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 36rpx;
						color: #FBE8B8;
						padding: 0 4rpx;
					}
				}
			}
		}
	}

	.textBox {
		width: 590rpx;
		height: auto;
		padding-bottom: 40rpx;

		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.cont {
			margin-top: 36rpx;
			width: 100%;
			text-align: center;
			padding: 0 38rpx;
		}

		.btn {
			margin: 32rpx auto 0;
			width: 440rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {
			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	/deep/ .u-checkbox__label {
		margin-right: 12rpx !important;
	}
</style>
